<template>
  <label class="yf-switch">
    <input :checked="modelValue" @change="onChange" class="yf-switch__adjunct" type="checkbox" />
    <div class="yf-switch__inner">
      <span class="yf-switch__dot"></span>
    </div>
  </label>
</template>

<script setup>
// import { defineProps, defineEmits } from "vue";

defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const onChange = function(e) {
  emit("update:modelValue", e.target.checked);
};
</script>

<script>
export default {
  name: "switch"
  // props: {
  //   modelValue: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  // methods: {
  //   onChange(e) {
  //     this.$emit("update:modelValue", e.target.checked);
  //   }
  // }
};
</script>